<template>
  <el-dialog class="dialog" title="绑定属性" center="center"  :visible.sync="show" :before-close="cancelBind">
    <div>
      <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
        <el-form-item prop="attrName" label="属性名称:">
          <el-input size="mini" type="text" v-model="filters.attrName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 属性列表 -->
    <div class="flex-box">
      <H3>属性库</H3>
      <div style="display: flex;">
        <el-button type="primary" plain icon="fa fa-chain" @click="confirmBind" size="mini">
          批量绑定
        </el-button>
        <el-alert title="提交绑定属性前先点击批量绑定" type="info" show-icon :closable="false" style="margin-left: 10px" />
      </div>
    </div>
    <el-table  style="margin-bottom: 30px;"  ref="tableList" :data="dataList" :fit="true" highlight-current-row max-height="400"
              @selection-change="handleSelectionChange" empty-text="对不起，没有找到相关数据！">
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="attrName" align="center" width="240" label="属性名称"></el-table-column>
      <el-table-column align="center" width="120" label="属性类型">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" effect="dark" :type="formatAttrTypes(scope.row.attrType)">
              {{ formatAttrType(scope.row.attrType) }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="businessName" align="center" width="200" label="商户"></el-table-column>
      <el-table-column prop="fieldName" align="center" width="120" label="字段名称"></el-table-column>
      <el-table-column prop="fieldType" align="center" width="120" label="字段类型"
                       :formatter="$Filters.formatFieldType"></el-table-column>
      <el-table-column prop="fieldOptions" align="center" width="200" label="字段选项"></el-table-column>
      <el-table-column prop="dockData" label="对接标识" align="center" width="120"></el-table-column>
      <!-- <el-table-column prop="dockFieldName" label="对接字段名" align="center" width="120"></el-table-column> -->
      <!--<el-table-column  align="center" label="展示位置" width="120">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" :type="scope.row.showFlag==1?'danger':''" effect="dark">
              scope.row.showFlag == 1?'结算页':'购物车'
            </el-tag>
          </div>
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" label="是否前置" prop="frontFlag">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" effect="dark" v-if="scope.row.frontFlag==1">
              是
            </el-tag>
            <el-tag size="mini" effect="dark" v-if="scope.row.frontFlag==0" type="info">
              否
            </el-tag>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="是否必填" prop="requiredFlag">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" effect="dark" v-if="scope.row.requiredFlag == 1">
              是
            </el-tag>
            <el-tag size="mini" effect="dark" v-if="scope.row.requiredFlag == 0" type="info">
              否
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否多选" prop="multiFlag">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" effect="dark" v-if="scope.row.multiFlag == 1">
              是
            </el-tag>
            <el-tag size="mini" effect="dark" v-if="scope.row.multiFlag == 0" type="info">
              否
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 绑定属性列表 -->
    <div>
      <H3>已绑定列表</H3>
    </div>
    <el-table max-height="400px" :data="attrList" :fit="true" highlight-current-row
              element-loading-text="数据加载中，请稍后..." empty-text="对不起，没有找到相关数据">
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-minus" type="danger" plain size="medium" circle
                     @click="subRelation(scope.$index)">
          </el-button>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="attrName" align="center" width="120" label="属性名称"></el-table-column>
      <el-table-column prop="businessName" align="center" width="120" label="商户"></el-table-column>
      <el-table-column prop="fieldType" align="center" width="120" label="字段类型"
                       :formatter="$Filters.formatFieldType"></el-table-column>
      <el-table-column prop="fieldOptions" align="center" label="字段选项"  width="200"></el-table-column>
      <el-table-column prop="dockData" label="对接标识" align="center" width="120"></el-table-column>
      <!-- <el-table-column prop="dockFieldName" label="对接字段名" align="center" width="120"></el-table-column> -->
      <!--<el-table-column width="120" align="center" label="展示位置">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" :type="scope.row.showFlag==1?'danger':''" effect="dark">
               scope.row.showFlag == 1?'结算页':'购物车'
            </el-tag>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column align="center" label="是否多选" prop="multiFlag" width="130">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" effect="dark" v-if="scope.row.multiFlag==1">
              是
            </el-tag>
            <el-tag size="mini" effect="dark" v-if="scope.row.multiFlag==0" type="info">
              否
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否记住" prop="rememberFlag" width="130">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.rememberFlag"
            active-text="是"
            inactive-text="否"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否必填" prop="requiredFlag" width="130">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.requiredFlag"
            active-text="是"
            inactive-text="否"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否前置" prop="frontFlag" width="130">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.frontFlag"
            active-text="是"
            inactive-text="否"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="列表前置" prop="displayWay" width="140">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.displayWay"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序(正序)" align="center" width="120">
        <template slot-scope="scope">
          <div>
            <el-input type="number" clearable v-model="scope.row.sort"
                      @input="handleSortInput(scope.row, scope.$index)"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="groups" label="分组(1-3)" align="center" width="120">
        <template slot-scope="scope">
          <div>
            <el-input type="number" clearable v-model="scope.row.groups"
                      @input="handleGroupInput(scope.row)"
                     ></el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
        <el-button plain type="success" @click="sureClick(1)">新增保存</el-button>
        <el-button plain type="primary" @click="sureClick(2)">替换保存</el-button>
        <el-button plain @click="cancelBind">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import AttrApi from "@/api/goods/attr"
  export default {
    /*props: {
      id: {
        type: Number | String,
      },
    },*/
    data() {
      return {
        dataList: [],
        filters: {
          attrType: "",
          attrName: ""
        },
        id: null,
        ids:[],
        businessId:"",
        show: false,
        attrList: [],
        selectedList: [],
        attrTypeList: [
          {id: 1, name: "分类"},
          {id: 2, name: "平台规则"},
          {id: 3, name: "产品"},
        ]
      }
    },
    components: {},
    methods: {
      init(type,id) {
        // 获取绑定列表数据
        let cond = {businessId:this.businessId}
        if (type == 1){
          cond.classifyId = id
        } else if (type == 2){
          cond.ruleId = id
        } else if (type == 3){
          cond.serverId = id
        } else if (type == 4){
          cond.goodsId = id
        }
        AttrApi.attrRelationList(cond)
          .then(res => {
            this.attrList = res.data
            // 根据groups正序排序
            this.attrList.sort((a, b) => {
              return a.groups - b.groups;
            })
          }).catch(err => {
        })
        this.onSearch()
      },
      confirmBind() {
        if (this.selectedList.length == 0) {
          this.$message({
            type: "warning",
            message: "请至少选择一项"
          })
          return
        } else {
          /*let val = this.selectedList.filter(item => {
            return !this.attrList.some(item2 => item2.attrId == item.attrId)
          })
          this.attrList = this.attrList.concat([...val])*/

          this.selectedList.forEach(item=>{
            item.sort = 99
            item.groups = 1
            item.displayWay = 0
          })
          this.attrList = this.attrList.concat([...this.selectedList])
        }
      },
      cancelBind() {
        this.show = false;
      },
      formatAttrType(cellValue) {
        if (cellValue === 1) {
          return '分类'
        } else if (cellValue === 2) {
          return '平台规则'
        } else if (cellValue === 3 || cellValue === 4) {
          return '产品'
        }
      },
      formatAttrTypes(cellValue) {
        if (cellValue === 1) {
          return 'primary'
        } else if (cellValue === 2) {
          return 'success'
        } else if (cellValue === 3 || cellValue === 4) {
          return 'warning'
        }
      },
      handleSelectionChange(arr) {
        this.selectedList = arr
      },
      handleSortInput(row, index) {
        let reg = /^[1-9][0-9]{0,2}$/
        if (row.sort && !reg.test(row.sort)) {
          row.sort = "1"
          this.$message.error("排序只能输入为1-999")
        }
      },
      handleGroupInput(val){
        let reg = /^[1-3]$/
        if(!reg.test(val.groups)){
          val.groups = ""
        }
      },
      subRelation(index) {
        if (this.attrList) {
          this.attrList.splice(index, 1)
        }
      },
      resetForm() {
        this.$refs.searchForm.resetFields()
        this.onSearch()
      },
      onSearch() {
        this.listData();
      },
      listData() {
        // 获取列表数据
        let cond = {
          attrName: this.filters.attrName,
          attrType: this.filters.attrType == 4?3:this.filters.attrType,
          businessId:this.businessId,
        }
        AttrApi.attrList(cond)
          .then(res => {
            this.dataList = res.data
            setTimeout(() => {
              this.$refs.tableList.doLayout()
            })
          }).catch(err => {
        })
      },
      singleBinding(param){
        let attrType = this.filters.attrType
        if (attrType == 1){
          param.classifyId = this.id
        } else if (attrType == 2){
          param.ruleId = this.id
        } else if (attrType == 3){
          param.serverId = this.id
        } else if (attrType == 4){
          param.goodsId = this.id
        }
        AttrApi.updateRelations(param).then(res => {
          this.$Utils.notifySuccess()
          this.show = false
        })
      },
      batchBinding(param){
        let attrType = this.filters.attrType
        if (attrType == 3){
          param.serverIds =  this.ids
        } else if (attrType == 4){
          param.goodsIds = this.ids
        }
        AttrApi.batchUpdateRelations(param).then(res => {
          this.$Utils.notifySuccess()
          this.show = false
        })
      },
      sureClick(type) {
        let attrs = []
        if (this.attrList && this.attrList.length > 0){
          attrs = this.attrList.map(item => {
            return {
              attrRelationId: item.attrRelationId,
              sort: item.sort,
              groups: item.groups,
              attrId: item.attrId,
              requiredFlag: item.requiredFlag,
              rememberFlag: item.rememberFlag,
              multiFlag: item.multiFlag,
              frontFlag: item.frontFlag,
              displayWay:item.displayWay,
            }
          })
        }
        // if (attrs.length === 0) {
        //   this.$message.error('请选中属性先点击批量绑定后提交替换保存或者新增保存')
        //   return false
        // }
        let params = {
          attrRelationList: attrs,
          type
        }
        if(this.id){
          this.singleBinding(params)
        }else{
          this.batchBinding(params)
        }
      },

      handleCreate({type,id,ids,businessId}) {
        Object.assign(this.$data, this.$options.data())//每次进来的时候重置data数据
        this.filters.attrType = type
        this.id = id
        this.ids = ids //ids存在表示批量绑定
        this.businessId = businessId
        this.show = true; // 显示弹出框
        if(this.id){
          this.init(type,id)
        }else{
          this.listData()
        }

      },
    }
  }
</script>

<style lang="scss" scoped>
  .dialog {
    &::v-deep .el-dialog__body{
      max-width: 90vw;
    }
    .flex-box{
      display: flex;
      align-items: center;
      H3{
        margin-right: 10px;
      }
    }

    &::v-deep .el-dialog {
      width: max-content;
    }

    .el-radio-group {
      margin-left: 10px;

      .el-radio {
        margin-right: 20px;
      }
    }

    .img-wrapper {
      width: 80px;
      height: 60px;
      overflow: hidden;
      border-radius: 3px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;

      .el-image {
        width: 100%;

        &::v-deep img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
</style>

